<div class="panel panel-info">

  <div class="panel-heading" style="height: 68px;">
    <div class="row" id="firstRow">
      <div class="col-md-8">
        <div *ngIf="searchOptionsLoaded" class="input-group">
          <span class="input-group-addon" (click)="searchNodeOnButtonClick()" style="cursor:pointer">Search</span>
          <select2 id="search" [data]="searchOptions" [width]="300" (valueChanged)="searchNodeOnEvent($event)"
                   [value]="searchValue" [options]="selectOptions"></select2>
        </div>
      </div>

      <div class="col-md-2">
        <div class="btn-group">
          <button class="btn btn-primary" (click)="saveConfiguration()"
                  data-toggle="popover" data-placement="top" data-content="Save your current configuration" data-container="body" data-trigger="hover" data-animation="am-fade-and-scale">
            <i class="fa fa-floppy-o"></i>
            Save
          </button>
        </div>
      </div>

      <div class="col-md-2" id="headerButtons">
        <div class="form-group">
          <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
              Actions <span class="caret"></span></button>

            <ul class="dropdown-menu dropdown-menu-right" role="menu">
              <li *ngIf="!legendShown" class="dropdown-item actions-dropdown-item" (click)="showLegend()"><a>Show Legend</a></li>
              <li *ngIf="legendShown" class="dropdown-item actions-dropdown-item" (click)="hideLegend()"><a>Hide Legend</a></li>
              <li class="divider"></li>
              <li *ngIf="!(selectedElement && selectedElement.name)" class="dropdown-item actions-dropdown-item">
                <a style="opacity: 0.3; cursor: not-allowed;" data-toggle="popover" data-html="true" data-content="Please select a node."
                   data-trigger="hover" data-container="#stepAdvanced" data-animation="am-fade-and-scale">Add Edge</a>
              </li>
              <li *ngIf="selectedElement && selectedElement.name" class="dropdown-item actions-dropdown-item" (click)="startEdgeCreation()">
                <a>Add Edge</a>
              </li>
              <!--
              <li class="dropdown-item actions-dropdown-item"><a>Aggregate Classes</a></li>
              <li class="dropdown-item actions-dropdown-item"><a>Split Class</a></li>
              -->
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="canvas" class="panel-body svg-content-responsive" style="height: 485px; padding: 0px;">
    <graph *ngIf="dataLoaded" #graph id="graph" [(modellingConfig)]="modellingConfig" [(selectedElement)]="selectedElement" (onSelectedElement)="updateSelectedElement($event)"
           style="height: 100%; width: 100%;"></graph>

    <div *ngIf="!dataLoaded" style="text-align: center; padding: 200px;">
      <i class="fa fa-spinner fa-pulse fa-3x fa-fw" aria-hidden="true"></i><br><br>
      <span>Loading Graph Model...</span>
    </div>

  </div>

</div>
